<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<style type="text/css">
			body{
				background: #F8F8F8;
			}
			.mui-bar{
				background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
			}
			a , .mui-title{
				color:rgba(255,255,255,1);
			}
			.container_mess{
				width: 100%;
				position: relative;
				float: left;
			}
			.message_one{
				width:calc(96% - 15px);
				height:164px;
				background:rgba(255,255,255,1);
				box-shadow:0px 10px 9px 0px rgba(231,231,231,0.31);
				border-radius:10px;
				position: relative;
				float: left;
				margin-left: 15px;
				margin-top: 24.5px;
			}
			.message_two{
				width: calc(96% - 15px);
				position: relative;
				float: left;
				border-bottom: 1px solid rgba(235,235,235,1);
				margin-left: 15px;
				padding-bottom: 10px;
				
			}
			.message_two>p:nth-child(1){
				font-size:17px;
				font-family:PingFang-SC-Bold;
				font-weight:bold;
				color:rgba(51,51,51,1);
				line-height:36px;
			}
			.message_two>p:nth-child(2){
				font-size:14px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(153,153,153,1);
				 text-overflow: -o-ellipsis-lastline;
				  overflow: hidden;
				  text-overflow: ellipsis;
				  display: -webkit-box;
				  -webkit-line-clamp: 2;
				  line-clamp: 2;
				  -webkit-box-orient: vertical;
			}
			.message_three{
				width: calc(96% - 15px);
				position: relative;
				float: left;
				margin-left: 15px;
				box-sizing: border-box;
			}
			.message_three>span{
				font-size:15px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(254,97,94,1);
				line-height:65px;
			}
			.message_three>img{
				width: 22px;
				height: 22px;
				float: right;
				margin-top: 20px;
			}
			.message_four{
				width: 100%;
				position: relative;
				float: left;
				text-align: center;
				font-size:12px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(153,153,153,1);
				line-height:36px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">系统消息</h1>
		</header>
		<div class="mui-content">
			<!-- <div class="container_mess">
				<div class="message_one">
								<div class="message_two">
									<p>系统消息</p>
									<p>恭喜你成为本平台的会员，欢迎您使用！希望您在
				使用中能多多提出意见...</p>
								</div>
								<div class="message_three">
									<span>查看详情</span>
									<img src="../image/c0b65835a72dafdd7c59700c35bee6f.png" alt="">
								</div>
							</div>
							<div class="message_four">19/07/05</div>
			</div> -->
			
	<!-- <div class="container_mess">
		<div class="message_one">
						<div class="message_two">
							<p>系统消息</p>
							<p>恭喜你成为本平台的会员，欢迎您使用！希望您在
		使用中能多多提出意见...</p>
						</div>
						<div class="message_three">
							<span>查看详情</span>
							<img src="../image/c0b65835a72dafdd7c59700c35bee6f.png" alt="">
						</div>
					</div>
					<div class="message_four">19/07/05</div>
	</div> -->
							
							
			</div>
		</div>
		<script src="../js/mui.js"></script>
		<script src="../js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
			mui.plusReady(function(){
				var url = plus.storage.getItem('url');
				var user =  plus.storage.getItem('user');
				user = JSON.parse(user);
				var create_time = 0;
				var page = 1;
				// mui.post()
				
				
				mui.init({
					beforeback: function() {　　　　
					var list = plus.webview.currentWebview().opener();　　　　
						  //refresh是A页面自定义事件
					mui.fire(list, 'wyaoshuaxin');
						 //返回true,继续页面关闭逻辑
					return true;
					},
					pullRefresh:{
						container:'body',
						up : {
							height:50,//可选.默认50.触发上拉加载拖动距离
							auto:true,//可选,默认false.自动上拉加载一次
							contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
							contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
							callback :function(){
								var that = this;
								getData(function(page){
									if(page==1){
										// mui('body').pullRefresh().endPullupToRefresh();
										that.endPullupToRefresh(false);
									}else{
										that.endPullupToRefresh(true);
									}
									
								})
							// setTimeout(function(){
							// 	mui('body').pullRefresh().endPullupToRefresh();
							// },1000)
							} //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
							},
					}
				});
				function getData(func){
					if(page==0){
						mui.toast('没有更多了');
						if(func){
							func(page);
						}
						return;
					}
					mui.post(url+'/juyou/Message/getsysymessagelist',{token:user.token,create_time:create_time},function(res){
							if(res.code==200){
								create_time = res.data.create_time;
								if(res.data.data.length<10){
									page = 0;
								}
								var str='';
								mui.each(res.data.data,function(i,v){
									// mui.toast(i)
									str+='<div class="container_mess">'+
											'<div class="message_one">'+
															'<div class="message_two">'+
																'<p>系统消息</p>'+
																'<p>'+v.neirong+'</p>'+
															'</div>'+
															'<div class="message_three" data-message="'+v.id+'">'+
																'<span>查看详情</span>'+
																'<img src="../image/c0b65835a72dafdd7c59700c35bee6f.png" alt="">'+
															'</div>'+
														'</div>'+
														'<div class="message_four">'+v.create_time+'</div>'+
										'</div>';
								})
								$(".mui-content").append(str)
							}else{
								mui.toast(res.msg);
							}
							// mui.toast(res.code);
							if(func){
								func(page);
							}
					})
				}
				//点击查看详情
				$(document).on('tap','.message_three',function(){
					var messageid = $(this).attr('data-message');
					// mui.alert(messageid);
					mui.openWindow({
						url:'system.html',
						id:'system.html',
						extras:{
							messageid:messageid
						}
					})
				})
			})
		
		</script>
	</body>

</html>
